<template>
  <div class="l animate__animated animate__fadeIn">
    <div class="item">
      <div class="title">管道材质<img src="/static/img/fgx.png" /></div>
      <div class="tips"><span class="r1">57.55</span>总长(Km)</div>
      <div class="item1-b">
        <div class="item1-b_i" v-for="(item, index) in gxCzList" :key="index">{{ item.gxCz }}<span class="r1">{{
          item.percentage * 100 }}</span>(%)</div>
      </div>
    </div>
    <div class="item">
      <div class="title">管道年份<img src="/static/img/fgx.png" /></div>
      <div class="echarts" ref="echarts1"></div>
    </div>
    <div class="item">
      <div class="title">管道管径<img src="/static/img/fgx.png" /></div>
      <div class="echarts" ref="echarts2"></div>
    </div>
  </div>
  <div class="r animate__animated animate__fadeIn">
    <div class="item">
      <div class="title">管道埋深<img src="/static/img/fgx_.png" /></div>
      <div class="tips"><span class="r1">{{ state.msTotal }}</span>总长(Km)</div>
      <div class="item1-b">
        <!-- <div class="item1-b_i">管点总数<span class="r1">256</span>(个)</div>
        <div class="item1-b_i">燃气管点<span class="r1">256</span>(个)</div>
        <div class="item1-b_i">钢管<span class="r1">1.25</span>(Km)</div> -->
        <div class="item1-b_i" v-for="(item, index) in msList">{{ item.ms }}<span class="r1" :key="index">{{ item.len
            }}</span></div>
      </div>
    </div>
    <div class="item">
      <div class="title">铺设类型<img src="/static/img/fgx_.png" /></div>
      <div class="echarts" ref="echarts3"></div>
    </div>
    <div class="item">
      <div class="title">设备类型<img src="/static/img/fgx_.png" /></div>
      <div class="echarts" ref="echarts4"></div>
    </div>
  </div>
  <div class="c">
    <div class="box">
      <div class="i">
        <div class="tips"><text>57.55</text>km</div>
        <div class="t">燃气管线</div>
      </div>
      <div class="i">
        <div class="tips"><text>256</text>个</div>
        <div class="t">燃气管点</div>
      </div>
      <div class="i">
        <div class="tips"><text>56.29</text>km</div>
        <div class="t">PE管线</div>
      </div>
      <div class="i">
        <div class="tips"><text>1.25</text>km</div>
        <div class="t">钢管管线</div>
      </div>
      <!-- <div class="echarts1"> -->
      <!-- <el-progress type="circle" :stroke-width="12" :percentage="50" color="#7ffcce" status="success" class="percent">
          <div class="num">623</div>
          进水口
        </el-progress>
      </div>
      <div class="echarts1">
        <el-progress type="circle" :stroke-width="12" :percentage="68" color="#ffff70" status="success" class="percent">
          <div class="num">1424</div>
          检查井
        </el-progress>
      </div>
      <div class="echarts1">
        <el-progress type="circle" :stroke-width="12" :percentage="12" color="#f3ccff" status="success" class="percent">
          <div class="num">569</div>
          排放口
        </el-progress> -->
      <!-- </div> -->
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, reactive, onMounted, toRefs } from 'vue'
import ManageService from '@/service/manage.service'
const state = reactive({
  gxCzList: [],
  yearList: [],
  gjList: [],
  msList: [],
  msTotal: 0,
  msTypeList: [],
  sbTypeList: [],
})
const { gxCzList, yearList, gjList, msList, msTypeList, sbTypeList } = toRefs(state)
const echarts1 = ref(null)
const echarts2 = ref(null)
const echarts3 = ref(null)
const echarts4 = ref(null)
// const echarts5 = ref(null)
const initEcharts1 = () => {
  const chart1 = echarts.init(echarts1.value)
  const chart1Data = yearList.value.map(item => {
    return {
      name: item.year,
      value: item.len.toFixed(2)
    }
  })
  chart1Data.sort((a, b) => b.value - a.value)
  chart1.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    // legend: {},
    grid: {
      left: '0',
      right: '6%',
      bottom: '3%',
      top: '5%',
      containLabel: true
    },
    xAxis: {
      splitLine: {
        show: false
      },
      axisLine: {
        //y轴
        show: false
      },
      axisTick: {
        show: false // 隐藏Y轴刻度线
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#ffffff'
        }
      },
      type: 'value'
      // boundaryGap: [0, 0.01]
    },
    yAxis: {
      axisLabel: {
        show: true,
        textStyle: {
          color: '#ffffff'
        }
      },
      axisLine: {
        //y轴
        show: false
      },
      axisTick: {
        show: false
      },
      inverse: true,
      type: 'category',
      data: chart1Data.map((item) => {
        return item.name
      })
    },
    series: [
      {
        type: 'bar',
        barWidth: 15,
        color: '#5941ef',
        label: {
          show: true,
          position: 'right',
          color: '#ffffff'
        },
        itemStyle: {
          normal: {
            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            barBorderRadius: [0, 2, 2, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: '#96ddff' },
              { offset: 1, color: '#0341ff' }
            ])
          }
        },
        data: chart1Data.map((item) => {
          return item.value
        })
      }
    ]
  })
}
const initEcharts2 = () => {
  const chart2 = echarts.init(echarts2.value)
  const chart2Data = gjList.value.map(item => {
    return {
      name: item.gj,
      count: item.count,
      value: item.len.toFixed(2)
    }
  })
  chart2Data.sort((a, b) => b.count - a.count)
  chart2.setOption({
    tooltip: {
      trigger: 'axis',
      // axisPointer: {
      //   type: 'cross',
      //   crossStyle: {
      //     color: '#fff'
      //   }
      // }
    },
    grid: {
      left: '6%',
      right: '6%',
      bottom: '20%',
      top: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: chart2Data.map(item => { return item.name }),
        // splitLine: {
        //   show: false
        // },
        // axisLine: {
        //   //y轴
        //   show: false
        // },
        // axisTick: {
        //   show: false // 隐藏Y轴刻度线
        // },
        axisLabel: {
          // formatter: function (value) {
          //   // 返回 value 的前三个字符
          //   return value.substring(0, 2);
          // },
          show: true,
          textStyle: {
            color: '#ffffff'
          }
        },
        axisPointer: {
          type: 'shadow',
          textStyle: {
            color: '#ffffff'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '管道数',
        min: 0,
        interval: 50,
        splitLine: {
          show: false
        },
        // axisLine: {
        //   //y轴
        //   show: false
        // },
        // axisTick: {
        //   show: false // 隐藏Y轴刻度线
        // },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          formatter: '{value} 个',
          textStyle: {
            color: '#ffffff'
          }
        }
      },
      {
        type: 'value',
        name: '管道长度',
        min: 0,
        interval: 5, splitLine: {
          show: false
        },
        axisLine: {
          //y轴
          show: false
        },
        axisTick: {
          show: false // 隐藏Y轴刻度线
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          formatter: '{value} Km',
          textStyle: {
            color: '#ffffff'
          }
        }
      }
    ],
    series: [
      {
        name: '	管道数',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 个';
          }
        },
        itemStyle: {
          normal: {
            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            barBorderRadius: [10, 10, 0, 0],
            color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
              { offset: 0, color: '#004fa8' },
              { offset: 1, color: '#00f0fd' }
            ])
          }
        },
        data: chart2Data.map(item => { return item.count })
      },
      {
        name: '	管道长度',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' Km';
          }
        },
        itemStyle: {
          color: '#ff00ff' // 将折线颜色设置为红色
        },
        data: chart2Data.map(item => { return item.value })
      }
    ]
  })
}
const initEcharts3 = () => {
  const chart3 = echarts.init(echarts3.value)
  const chart3Data = msTypeList.value.map(item => {
    return {
      name: item.msType,
      value: item.len.toFixed(2)
    }
  })
  // ref([
  //   { name: '直线点', value: 161 },
  //   { name: '弯头', value: 3 },
  //   { name: '三通', value: 47 },
  //   { name: '气源点', value: 1 },
  //   { name: 'JF', value: 40 },
  //   { name: '管冒', value: 4 }
  // ])
  chart3Data.sort((a, b) => b.value - a.value)
  chart3.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    // legend: {},
    grid: {
      left: '6%',
      right: '6%',
      bottom: '3%',
      top: '5%',
      containLabel: true
    },
    xAxis: {
      splitLine: {
        show: false
      },
      axisLine: {
        //y轴
        show: false
      },
      axisTick: {
        show: false // 隐藏Y轴刻度线
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: 'none'
        }
      },
      inverse: true,
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      axisLabel: {
        show: true,
        textStyle: {
          color: '#ffffff'
        }
      },
      position: 'right',
      axisLine: {
        //y轴
        show: false
      },
      axisTick: {
        show: false
      },
      inverse: true,
      type: 'category',
      data: chart3Data.map((item) => {
        return item.name
      })
    },
    series: [
      {
        type: 'bar',
        barWidth: 15,
        color: '#0caed3',
        label: {
          show: true,
          position: 'left',
          color: '#ffffff'
        },
        itemStyle: {
          normal: {
            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            barBorderRadius: [0, 2, 2, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: '#ff6f03' },
              { offset: 1, color: '#fffecc' }
            ])
          }
        },
        data: chart3Data.map((item) => {
          return item.value
        })
      }
    ]
  })
}
const initEcharts4 = () => {
  const chart4 = echarts.init(echarts4.value)
  const chart4Data = sbTypeList.value.map(item => {
    return {
      name: item.tz,
      value: item.num
    }
  })
  //   ref([
  //   { name: '网点统计', value: 16, dw: '个' },
  //   { name: '用户数量', value: 926, dw: '人' },
  //   { name: '钢瓶总数', value: 6721, dw: '只' },
  //   { name: '车辆统计', value: 89, dw: '辆' },
  //   { name: '场站统计', value: 16, dw: '个' },
  //   { name: '配气工数量', value: 122, dw: '人' },
  // ])
  chart4Data.sort((a, b) => a.value - b.value)
  chart4.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var tooltipText = '';
        if (params.length > 0) {
          tooltipText += params[0].name + '<br>';
          tooltipText += params[0].value + `(个})` + '<br>';
          // 在这里可以根据需要添加更多的信息，params 数组包含了所有数据点的信息
        }
        return tooltipText;
      }
    },
    xAxis: {
      // axisLine: {
      //   //x轴坐标轴，false为隐藏，true为显示
      //   show: false
      // },

      // axisTick: {
      //   show: false
      // },
      axisLabel: {
        formatter: function (value) {
          // 返回 value 的前三个字符
          return value.substring(0, 2);
        },
        show: true,
        textStyle: {
          color: '#ffffff'
        }
      },
      type: 'category',
      data: chart4Data.map((item) => {
        return item.name
      })
    },
    yAxis: {
      splitLine: {
        show: false
      },
      axisLine: {
        //y轴
        show: false
      },
      axisTick: {
        show: false // 隐藏Y轴刻度线
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#ffffff'
        }
      },
      max: 1000, // 设置Y轴的最大值为10
      type: 'value'
    },
    grid: {
      top: '10%',
      left: '10%',
      right: '1%',
      bottom: '30%',
      containLabel: false
    },
    series: [
      {
        data: chart4Data.map((item) => {
          return { value: item.value }
        }),
        barWidth: 22,
        label: {
          show: true,
          position: 'top',
          color: '#ffffff'
        },
        itemStyle: {
          normal: {
            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            barBorderRadius: [10, 10, 10, 10],
            color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
              { offset: 0, color: '#004fa8' },
              { offset: 1, color: '#00f0fd' }
            ])
          }
        },
        type: 'bar'
      }
    ]
  })
}
const initEcharts = () => {
  // const chart5 = echarts.init(echarts5.value)
  // chart5.setOption({
  //   tooltip: {
  //     show: false, // 关闭鼠标移上去后显示浮框信息
  //     trigger: 'item',
  //     confine: true
  //   },
  //   graphic: [{
  //     type: 'text',
  //     left: 'center',
  //     top: '45%',
  //     style: {
  //       text: '天然气企业',
  //       textAlign: 'center',
  //       fill: '#fff',
  //       fontSize: 14
  //     }
  //   }],
  //   series: [
  //     {
  //       name: 'Access From',
  //       type: 'pie',
  //       radius: ['40%', '60%'],
  //       data: [
  //         { value: 1, name: '区域数量' },
  //         { value: 50, name: '从业人员' },
  //         { value: 0, name: '许可证到期' },
  //         { value: 1, name: '符合经营' },
  //       ],
  //       emphasis: {
  //         itemStyle: {
  //           shadowBlur: 10,
  //           shadowOffsetX: 0,
  //           shadowColor: 'rgba(0, 0, 0, 0.5)'
  //         }
  //       }
  //     }
  //   ]
  //   // series: [
  //   //   {
  //   //     name: 'Access From',
  //   //     type: 'pie',
  //   //     radius: ['40%', '60%'],
  //   //     avoidLabelOverlap: false,
  //   //     hoverAnimation: false,
  //   //     label: {
  //   //       show: true,
  //   //       position: 'center', // 设置标签位置为饼状图中心
  //   //       formatter: '{b}\n{c} ({d}%)' // 设置标签文本格式
  //   //     },
  //   //     emphasis: {},
  //   //     labelLine: {
  //   //       show: false
  //   //     },
  //   //     data: [
  //   //       { value: 1048, name: '进水口' },
  //   //       { value: 0, name: 'Direct' },
  //   //     ]
  //   //   }
  //   // ]
  // })
}
onMounted(() => {
  initEcharts()
  ManageService.post_material().then((res) => {
    gxCzList.value = res.data
  })
  ManageService.post_year().then((res) => {
    yearList.value = res.data
    initEcharts1()
  })
  ManageService.post_gj().then((res) => {
    gjList.value = res.data
    initEcharts2()
  })
  ManageService.post_ms().then((res) => {
    const arr = res.data.map(item => {
      return { ms: item.ms, len: item.len.toFixed(2) }
    })
    let total = 0
    arr.forEach(item => {
      total = Number(total) + Number(item.len)
    })
    state.msTotal = total
    msList.value = arr
  })
  ManageService.post_msType().then((res) => {
    msTypeList.value = res.data
    initEcharts3()
  })
  ManageService.post_point_tz().then((res) => {
    sbTypeList.value = res.data
    initEcharts4()
  })
})
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'yjsz';
  src: url('/static/ttf/yjsz.TTF');
  font-weight: normal;
  font-style: normal;
}

.l {
  width: 370px;
  height: 100%;
  color: #fff;
  background-image: linear-gradient(-90deg,
      rgba(255, 255, 255, 0) 0%,
      #0b173f 80%);
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 10px;
  z-index: 100;

  .item {
    &:nth-child(1) {
      margin-top: 50px;
      height: 20%;

      .item1-b {
        height: calc(100% - 100px);
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
        padding: 0 30px;
        margin-top: -10px;

        .item1-b_i {
          width: 50%;
        }

        .r1 {
          color: #20dbfd;
          text-shadow: 0 0 10px #00d8ff;
          font-size: 26px;
          font-weight: bold;
          padding-right: 5px;
          font-family: yjsz;
        }
      }
    }

    &:nth-child(2) {
      height: 35%;
    }

    &:nth-child(3) {
      height: 45%;
    }

    .title {
      // margin-bottom: 10px;
      // padding-bottom: 5px;
      font-size: 18px;
      letter-spacing: 5px;
      position: relative;
      line-height: 35px;

      img {
        width: 100%;
        height: 11px;
        position: absolute;
        left: 0;
        bottom: 0;
      }

      // background: url(/static/img/fgx.png) no-repeat;
      // background-size: 100% 11px;
    }

    .tips {
      margin-top: 15px;
      padding-left: 10px;

      .r1 {
        color: #20dbfd;
        text-shadow: 0 0 10px #00d8ff;
        font-size: 46px;
        font-weight: bold;
        padding-right: 5px;
        font-family: yjsz;
      }
    }

    .echarts {
      height: calc(100% - 35px);
    }
  }
}

.r {
  width: 370px;
  height: 100%;
  color: #fff;
  background-image: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      #0b173f 80%);
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 10px;
  z-index: 100;

  .item {
    &:nth-child(1) {
      margin-top: 50px;
      height: 20%;

      .item1-b {
        height: calc(100% - 100px);
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
        padding: 0 30px;
        margin-top: -10px;

        .item1-b_i {
          width: 50%;
          text-align: right;
        }

        .r1 {
          color: #e6f706;
          text-shadow: 0 0 10px #00d8ff;
          font-size: 26px;
          font-weight: bold;
          padding-right: 5px;
          font-family: yjsz;
        }
      }
    }

    &:nth-child(2) {
      height: 35%;
    }

    &:nth-child(3) {
      height: 45%;
    }

    .title {
      font-size: 18px;
      letter-spacing: 5px;
      position: relative;
      line-height: 35px;
      text-align: right;
      overflow: hidden;
      width: 100%;

      img {
        width: 100%;
        height: 11px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }

    .tips {
      margin-top: 15px;
      padding-right: 10px;
      text-align: right;
      width: 100%;

      .r1 {
        color: #e6f706;
        text-shadow: 0 0 10px #00d8ff;
        font-size: 46px;
        font-weight: bold;
        padding-right: 5px;
        font-family: yjsz;
      }
    }

    .echarts {
      height: calc(100% - 35px);
    }
  }
}

.c {
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0;
  z-index: 99;
  background-image: linear-gradient(-180deg,
      rgba(255, 255, 255, 0) 0%,
      #0b173f 80%);
  display: flex;
  justify-content: center;
  align-items: end;

  .box {
    width: 808px;
    height: 110px;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;

    .i {
      width: 170px;
      height: 110px;
      background: url(/static/icon/dizuo.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      margin: 0 20px;

      .tips {
        color: #80fdea;
        margin-top: 10px;

        text {
          font-size: 26px;
          font-weight: bold;
        }
      }

      .t {
        color: #fff;
        margin-top: 5px;
      }
    }

    .echarts1 {
      width: 33.33333%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      :deep(.el-progress.is-success .el-progress__text) {
        color: #fff;
      }

      .num {
        margin-bottom: 5px;
        font-size: 20px;
        font-weight: 600;
      }

      &:nth-child(1) {
        .num {
          color: #7ffcce;
        }
      }

      &:nth-child(2) {
        .num {
          color: #ffff70;
        }
      }

      &:nth-child(3) {
        .num {
          color: #f3ccff;
        }
      }
    }
  }
}

:deep(.percent svg path:nth-child(1)) {
  stroke: #0d3166;
}
</style>
